
<template>
  <div class="operate-exam">
    <div style="height: 30px;">
      <el-breadcrumb style="float: left;" separator="/">
          <el-breadcrumb-item :to="{ path: '/expertGroupSetting' }">
              <span
                  @click="cancel()"
              >{{ $t('expertGroupSett.groupSett') }}</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t('expertGroupSett.increased') }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
      <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
        <el-row :gutter="24" style="height: 50px;" class="condition">
          <el-col :span="8">
            <el-form-item :label="$t('expertGroupSett.college')">
              <DictSelect clearable style="width: 100%" 
              filterable
                v-model="queryForm.condition.faculty" 
                :plzSelect="$t('internship.pleaseSelect')"
                :data="options.faculty" >
              </DictSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('expertGroupSett.technical')">
              <el-select v-model="queryForm.condition.title" filterable  clearable  style="width:100%">
                <el-option v-for="item in options.technicalList" :key='item' :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-transfer
          id='transfer'
          filterable
          :filter-method="filterMethod"
          :filter-placeholder="$t('expertGroupSett.pleaseEnter')"
          :titles="[$t('expertGroupSett.notSelectedList'), $t('expertGroupSett.selectedList')]"
          v-model="queryForm.degreeType"
          @change='changeDegreeType'
          :data="options.dataTabList">
          <span slot-scope="{ option }" class="option" > 
            <span style="width:100px">{{ option.label }}</span>  
            <span style="width:100px">{{ option.value }} </span> 
            <span style="width:100px">{{ option.title }} </span> 
            <span class="opSpan" style="width:100px;" :title='option.faculty'>{{ option.faculty }} </span> 
          </span>
        </el-transfer>
          <el-row type="flex" class="row-bg" justify="center" style="margin-top:20px">
          <el-button type="primary" style="margin-left:10px" @click="confirm">{{$t('expertGroupSett.confirm')}}</el-button>
          <el-button style="margin-left:10px" @click="cancel">{{$t('expertGroupSett.cancel')}}</el-button>
          </el-row>
      </condition-card>
      
  </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import competiManagementApi from 'common/src/api/subjectCompetition/competiManagement';
export default {
  props: {
    compile: {
      type: String
    },
    dataList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      queryForm: {
        degreeType: [],
        pageNum_: 1,
        pageSize_: 10000,
        total_: 0,
        condition: {
          "faculty": "",
          "title": "",
        }
      },
      indexKey: 1,
      
      multipleSelection: [],
      options: {
        dataTabList: [
          // {label: '上海', value: 'shanghai', key: 'shanghai'}, 
          // {label:'北京', value: 'beijing', key: 'beijing'}
        ],
        technicalList: [],
        degreeType: [],
        formLearning: [],
        faculty: [],
        profession: [],
        trainingCategory: []
      },
      queryFormDegreeType: []
    };
  },
  created() {
    this.getOptions()
  },
  mounted() {
    // this.postCompetiManagement(this.queryForm)
  },
  methods: {
    postCompetiManagement(data) {
      this.options.dataTabList = []
      competiManagementApi.getTeacherListPage(data).then(res =>{
        let list = res.data.list
        if (list.length > 0) {
          list.forEach(el => {
            this.options.dataTabList.push({
              label: el.specialistName,
              value: el.specialistWorkId,
              faculty: el.facultyI18n,
              title: el.title,
              key: el.specialistWorkId
            })
          });
          if (this.queryFormDegreeType.length > 0) {
            this.options.dataTabList.forEach(el => {
              this.queryFormDegreeType.forEach(ele => {
                if (el.value == ele) {
                  this.queryForm.degreeType.push(el.value)
                }
              })
            })
          }
        }
        
      })
    },
    changeDegreeType(val) {
      this.queryFormDegreeType = val
    },
    // 字典获取
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["profession", 'X_PYLB', 'X_XWLX', 'X_XXXS', 'X_YX']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            technicalList: "profession",
            degreeType: "X_XWLX",
            formLearning: "X_XXXS",
            faculty: "X_YX",
            TrainingLevel: "X_PYCC"
          },
          res.data,
          this.options
        );
      });
    },
    
    // 查询
    onSearch() {
      if (this.queryForm.condition.faculty) {

        this.postCompetiManagement(this.queryForm)
      } else {
        this.$message.warning('请选择学院')
      }
    },
    // 重置
    resetSearch() {
      for (let key in this.queryForm.condition) {
        this.queryForm.condition[key] = '';
      }
      this.queryForm.degreeType = []
      this.options.dataTabList = []
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1 || item.value.indexOf(query) > -1;
    },
    confirm() {
      if (this.queryForm.degreeType.length > 0) {
        let list = []
        this.queryForm.degreeType.forEach(el => {
          list.push({
            specialistWorkId: el,
            deleteFlag: '0'
          })
        })
        this.$emit('change-exam', list);
      } else {
        
        // this.$message({
        //   duration: 0,
        //   showClose: true,
        //   message: this.$t('expertGroupSett.selectData'),
        //   type: 'error'
        // });
        this.$message.error(this.$t('expertGroupSett.selectData'));
        
      }
      
    },
    // 取消
    cancel() {
      this.$emit('change-exam');
    }
  }
}
</script>
<style scoped>
.option {
  display: flex;
  justify-content: space-between;
}
.opSpan {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  /* width:100px; */
  /* border:1px solid red; */
  overflow:hidden;
/* text-overflow: ellipsis; white-space: nowrap; overflow: hidden;cursor:pointer; */
}
.opSpan:hover{
  text-overflow: ellipsis;
  white-space: nowrap;
  
}
</style>
<style lang="scss" scoped>
.operate-exam ::v-deep {
  .el-transfer .el-transfer-panel{
    width: calc(45% - 50px) !important;
  }
  
  .el-breadcrumb__item:last-child ::v-deep {
        .el-breadcrumb__inner {
            color: #606266;
            font-weight: bold;
            cursor: default;
        }
    }
    .el-breadcrumb__item ::v-deep {
        .is-link {
            color: #aaa;
            font-weight: unset;
        }
        .is-link:hover {
            color: #409eff;
        }
    }
  .el-transfer-panel__body{
    min-height: 540px;
    max-height: 100%;
  }
  .el-transfer-panel__list.is-filterable {
    min-height: 500px;
    max-height: 100%;
  }
}

</style>